<template>
  <div class="page">
    <div class="pageButton">
      <div id="filePicker" @change="getBigectURL($event)">选择文件</div>
      <div class="fileSuccess" type="success" @click="isClick && resume()">开始上传</div>
    </div>
    <div class="panelCenter">
      <div class="file-panel">
        <h2>文件列表</h2>
        <div class="file-list">
          <ul
            class="file-item"
            :class="`file-${file.id}`"
            v-for="file in fileList"
            :key="file.index"
          >
            <li class="file-name">{{file.name}}</li>
            <li class="file-size">{{fileSize(file.size)}}</li>
            <li class="file-status">等待上传...</li>
            <li class="file-operate">
              <a title="移除" @click="remove(file)">
                <i class="iconfont icon-close-big">
                  <img src="../../assets/images/关闭.png" width="10" height="10" />
                </i>
              </a>
            </li>
            <li class="progress"></li>
          </ul>
          <div v-if="fileList.length>0" class="previewMov">
            <video
              x5-playsinline
              playsinline
              webkit-playsinline
              :src="videoSrc"
              controls="controls"
              width="100%"
              height="100%"
            ></video>
          </div>
          <div class="no-file" v-if="!fileList.length">
            <i class="iconfont icon-empty-file"></i>
            <span class="no-file-txt">暂无待上传文件</span>
          </div>
        </div>
      </div>
      <el-dialog :fullscreen="fullscreen" :visible.sync="centerDialogVisible" center>
        <div class="fireGifMov">
          <el-progress type="circle" :percentage="percentage"></el-progress>
          <div style="margin-top: -90px;">
            <div class="fireRicket" style="display: flex;justify-content: center;">
              <img :src="imgSrc" width="50" height="50px" />
            </div>
            <div class="firefire" style="display: flex;justify-content: center;">
              <img ref="isSmall" :src="imgFireSmall" v-show="isSmall" width="10" height="10" />
              <img ref="isMedium" :src="imgFireMedium" v-show="isMedium" width="15" height="15" />
              <img ref="isBig" :src="imgFireBig" v-show="isBig" width="30" height="30" />
            </div>
          </div>
        </div>
      </el-dialog>
    </div>

    <vue-upload
      ref="uploader"
      uploadButton="#filePicker"
      @fileChange="fileChange"
      @progress="onProgress"
      @success="onSuccess"
    ></vue-upload>
  </div>
</template>

<script>
import vueUpload from '@/components/newComp/upload'
import img1 from '../../assets/images/upload/1.png'
import img2 from '../../assets/images/upload/小.png'
import img3 from '../../assets/images/upload/中.png'
import img4 from '../../assets/images/upload/大.png'
import { setTimeout } from 'timers'
import { method } from '../../assets/js/alert'

export default {

  data () {
    return {
      fileList: [],
      percentage: 0,
      imgSrc: img1,
      imgFireSmall: img2,
      imgFireMedium: img3,
      imgFireBig: img4,
      isFire: false,
      isSmall: true,
      isMedium: false,
      isBig: false,
      timerName: null,
      centerDialogVisible: false,
      videoSrc: '',
      fullscreen: true,
      isClick: true,
      isLoad: true
    }
  },
  created () {
    method()
  },
  computed: {
    uploader () {
      return this.$refs.uploader
    }
  },
  methods: {
    getBigectURL (file) {
      if (this.fileList.length > 1) {
        alert('文件上传已达到最大上限数')
        this.fileList.pop()
      }
      var current = file.target.files[0]
      var r = new FileReader()
      r.readAsDataURL(current)
      var that = this
      console.log('in', that.fileList.length)
      r.onload = function (e) {
        if (that.fileList.length >= 1) {
          if (that.isLoad === true) {
            that.videoSrc = e.currentTarget.result
            that.isLoad = false
          }
        }
      }
    },
    init () {
      this.timerName = setInterval(() => {
        this.init2()
      }, 200)
    },
    init2 () {
      if (this.isSmall === true) {
        this.isSmall = false
        this.isMedium = true
        this.isBig = false
        return false
      }
      if (this.isMedium === true) {
        this.isSmall = false
        this.isMedium = false
        this.isBig = true
        return false
      }
      if (this.isBig === true) {
        this.isSmall = true
        this.isMedium = false
        this.isBig = false
        return false
      }
    },
    fileChange (file) {
      if (!file.size) return
      this.fileList.push(file)
    },

    onProgress (file, percent) {
      // eslint-disable-next-line no-undef
      $(`.file-${file.id} .file-status`).html('正在上传...')

      // // eslint-disable-next-line no-undef
      // $(`.file-${file.id} .progress`).css('width', percent * 100 + '%')
      // // eslint-disable-next-line no-undef
      // $(`.file-${file.id} .file-status`).html((percent * 100).toFixed(2) + '%')
      this.percentage = parseInt((percent * 100).toFixed(2))
    },
    beforeDestroy () {
      window.clearInterval(this.timerName)
      this.timerName = null
      setTimeout(() => {
        if (this.percentage > 99) {
          this.centerDialogVisible = false
          // eslint-disable-next-line no-undef
          $(`.file-status`).html('上传成功！')
        }
      }, 1000)
    },
    onSuccess (file, response) {
      this.beforeDestroy()
      if (response.needMerge) {
        // eslint-disable-next-line no-undef
        api.mergeUpload({
          tempName: response.tempName,
          fileName: file.name
        }).then(res => {
          console.log('res', res)
          // eslint-disable-next-line no-undef
          let $fileStatus = $(`.file-${file.id} .file-status`)
          if (res.status === 0) {
            $fileStatus.html('上传成功，转码中')
          } else if (res.status === 1) {
            $fileStatus.html('上传失败')
            this.centerDialogVisible = false
          } else if (res.status === 2) {
            $fileStatus.html('上传成功')
          }
        })
      }
      setTimeout(() => {
        if (this.percentage > 99) {
          this.remove(file)
          this.isClick = true
        }
      }, 2000)
    },

    resume () {
      if (this.fileList.length >= 1) {
        this.isClick = false
        this.percentage = 0
        this.centerDialogVisible = true
        this.init()
        this.uploader.upload()
      } else {
        alert('请选择文件')
      }
    },
    remove (file) {
      // 取消并中断文件上传
      this.uploader.cancelFile(file)
      // 在队列中移除文件
      this.uploader.removeFile(file, true)
      // 在ui上移除
      let index = this.fileList.findIndex(ele => ele.id === file.id)
      this.fileList.splice(index, 1)
      this.isLoad = true
      this.videoSrc = ''
    },

    fileSize (size) {
      // eslint-disable-next-line no-undef
      return WebUploader.Base.formatSize(size)
    },
    fileCategory (ext) {
      let type = ''
      const typeMap = {
        image: ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp'],
        video: ['mp4', 'm3u8', 'rmvb', 'avi', 'swf', '3gp', 'mkv', 'flv'],
        text: ['doc', 'txt', 'docx', 'pages', 'epub', 'pdf', 'numbers', 'csv', 'xls', 'xlsx', 'keynote', 'ppt', 'pptx']
      }

      Object.keys(typeMap).forEach((_type) => {
        const extensions = typeMap[_type]
        if (extensions.indexOf(ext) > -1) {
          type = _type
        }
      })
      return type
    }
  },
  watch: {},
  components: {
    vueUpload
  }
}
</script>

<style lang="scss">
$h-row: 50px;
.page {
  margin-top: 10px;
}
.pageButton {
  display: flex;
  justify-content: flex-start;
  margin-top: 30px;
}
.webuploader-pick {
  position: relative;
  display: block !important;
  cursor: pointer;
  background: #00b7ee;
  padding: 0 !important;
  color: #fff;
  text-align: center;
  border-radius: 0.04rem;
  overflow: hidden;
  height: 52px;
  line-height: 52px;
  width: 120px;
  text-align: center;
}
.fileSuccess {
  color: #ffffff;
  background-color: #67c23a;
  height: 52px;
  line-height: 52px;
  width: 120px;
  text-align: center;
  margin-left: 100px;
}
.previewMov {
  height: 310px;
  width: 600px;
  margin: 0 auto;
  margin-top: 25px;
}

.file-panel {
  width: 100%;
  margin-top: 30px;
  box-shadow: 0 2px 12px 1px rgba(0, 0, 0, 0.1);

  > h2 {
    height: 80px;
    line-height: 80px;
    padding: 0 10px;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
  }

  .file-list {
    position: relative;
    height: 400px;
    overflow-y: auto;
    background-color: rgb(250, 250, 250);
  }

  .file-item {
    position: relative;
    height: $h-row;
    line-height: $h-row;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    z-index: 1;

    > li {
      display: inline-block;
    }
  }
  .file-name {
    width: 40%;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 10px;
  }
  .file-size {
    margin-left: 40px;
    width: 20%;
    overflow: hidden;
  }
  .file-status {
    width: 20%;
    overflow: hidden;
  }
  .no-file-txt {
    font-size: 0.4rem;
  }
  .file-operate {
    width: 10%;
    overflow: hidden;

    > a {
      padding: 10px 5px;
      cursor: pointer;
      color: #666;

      &:hover {
        color: #ff4081;
      }
    }
  }
  .icon-close-big {
    background: url(../../assets/images/关闭.png);
  }

  .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: $h-row - 1;
    width: 0;
    background-color: #e2edfe;
    z-index: -1;
  }

  .no-file {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
  }
}
</style>

<style>
.el-progress--circle .el-progress__text,
.el-progress--dashboard .el-progress__text {
  top: 115%;
  font-size: 50px !important;
  color: #177bfd;
}
.el-dialog--center {
  background-color: #ffffff00;
}
.el-dialog__body {
  display: flex;
  justify-content: center;
}
.fireGifMov {
  margin-top: 380px;
}
.el-progress--circle .el-progress__text,
.el-progress--dashboard .el-progress__text {
  color: #ffffff;
}
.el-progress--circle,
.el-progress--dashboard {
  display: flex;
  justify-content: center;
}
</style>
